<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    :rules="rules"
    @submit.prevent
    label-width="120px"
    class="demo-ruleForm"
  >
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="应用名称" prop="name">
          <el-input v-model="ruleForm.name" type="input" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="描述" prop="description">
          <el-input v-model="ruleForm.description" maxlength="100" :rows="5" type="textarea" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script lang="ts" setup>
import { reactive, ref, defineExpose } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  name: '',
  description: ''
})
const rules = reactive<FormRules<typeof ruleForm>>({
  name: [
    {
      required: true,
      message: '请输入应用名称',
      trigger: 'blur'
    }
  ]
})
const setFormData = (data: any) => {
  Object.keys(ruleForm).forEach((key) => {
    if (data[key]) {
      ruleForm[key] = data[key]
    }
  })
}
defineExpose({
  ruleForm,
  setFormData,
  ruleFormRef
})
</script>
<style lang="less" scoped></style>
